<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background}">
		<uni-nav-bar fixed left-icon="left" :title="info.title" @clickLeft="back" />
		<scroll-view scroll-y="true" :style="{'height':scroll_height+'px'}">
			<view style="height: 40rpx;">
				
			</view>
			<view class="item" v-if="info.list">
				<view class="divider">
					目录
				</view>
				<view v-for="(item,index) in info.list" :key="index" style="line-height: 80rpx;">
					<rich-text @itemclick="search" style="font-weight: bold;font-size: 32rpx;"
						:nodes="(index+1)+'.'+item.title">
					</rich-text>
				</view>
			</view>
			<view v-for="(item,index) in info.list" :key="index" class="item">
				<rich-text @itemclick="search" class="title" :nodes="(index+1)+'.'+item.title">
				</rich-text>
				<view class="divider">
					简介
				</view>
				<rich-text @itemclick="search" class="des" :nodes="item.des||'无简介'">
				</rich-text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getBookListById
	} from '../../api/index.js'
	import {
		RpxToPx,
		PxToRpx
	} from "../../utils/index.js"
	export default {
		data() {
			return {
				info: {},
				color: "#2979ff",
				scroll_height: 100
			};
		},
		onLoad(e) {

			uni.showLoading({
				mask: true
			})
			this.scroll_height = getApp().globalData.screenHeight - 44 - 1 * parseInt(RpxToPx(20)) - getApp()
				.globalData.statusBarHeight
			getBookListById(e.id).then(res => {
				let list = res.list
				for (let j of list) {
					var replace = `<a style="color:${this.color};">$1</a>`
					var a = /([0-9]+.?)《/g.exec(j.title)
					let s = j.title.replace(/ /g, '').replace(/：/g, ':')
					if (a) {
						s = s.replace(a[1], '')
					}
					s = s.replace('.', '')
					let r = /(《.*?》)/gs
					
					s = s.replace(r, replace)
					
					let author = /作者:(.*)/g.exec(s)
					if (author) {
						r = new RegExp(`(${author[1]})`, 'gs')
						s = s.replace(r, replace)
					}
					j.title = s

					s = j.des
					r = /(《.*?》)/gs
					s = s.replace(r, replace)
					j.des = s
				}
				this.info = res
				uni.hideLoading()
			})
		},
		onShow() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			search(e) {
				let name
				try {
					let r = /《(.*?)》/gs
					name = r.exec(e.detail.node.children[0].text)[1]
				} catch (event) {
					name = e.detail.node.children[0].text
				}
				uni.navigateTo({
					url: '../results/results?keyword=' + name
				})
			}
		}
	}
</script>

<style lang="less">
	.container.dark {
		/deep/.uni-nav-bar-text {
			color: white !important;
		}

		/deep/.uni-icons {
			color: white !important;
		}
	}

	.container {
		background: var(--background);
		padding: 20rpx 0;

		/deep/.uni-navbar__header {
			background-color: var(--background) !important;
			border: none;
		}

		/deep/.uni-navbar__content {
			border: none;
		}

		.item:nth-child(1) {
			margin-top: 0;
		}

		.item:nth-last-child {
			margin-bottom: 0;
		}

		.divider {
			display: flex;
			margin: 40rpx 0;
			align-items: center;
			justify-content: center;
			border: 1rpx solid var(--color-main);
			border-width: 0;
			font-weight: bold;
		}

		.divider::after {
			content: "";
			display: block;
			flex: 1;
			box-sizing: border-box;
			height: 1px;
			border-color: var(--color-main);
			border-style: inherit;
			border-width: 1px 0 0;
			margin-left: 10rpx;
		}

		.divider::before {
			content: "";
			display: block;
			flex: 1;
			box-sizing: border-box;
			height: 1px;
			border-color: var(--color-main);
			border-style: inherit;
			border-width: 1px 0 0;
			margin-right: 10rpx;
		}

		.item {
			margin: 40rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);
			
			.title {
				font-size: 36rpx;
				font-weight: bolder;
			}

			.des {
				padding: 10rpx 0;
				margin-top: 40rpx;
				line-height: 60rpx;
				font-size: 32rpx;
				white-space: pre-wrap;
				word-break: break-all;
				color: var(--color-second) !important;
			}
		}

	}
</style>
